<!-- <script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector('.populationechartsr'))

  const option = {
    title: [{
      text: '50%',
      x: 'center',
      top: '42%',
      textStyle: {
        fontSize: 18,
        fontWeight: 400,
        color: '#1ac9ff'
      }
    }],
    polar: {
      radius: ['42%', '52%'],
      center: ['50%', '50%']
    },
    angleAxis: {
      max: 100,
      show: false,
      startAngle: 180
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        type: 'bar',
        roundCap: true,
        barWidth: 90,
        showBackground: true,
        backgroundStyle: {
          color: '#227f95'
        },
        data: [50],
        coordinateSystem: 'polar',
        itemStyle: {
          color: '#1bd4af'
        }
      },
      // 外圈1
      {
        type: 'pie',
        selectedMode: 'single',
        center: ['50%', '50%'],
        radius: ['58%', '62%'],
        startAngle: -90,  // 设置饼图旋转45度
        labelLine: {
          show: false  // 隐藏外部延伸的线段
        },
        data: [
          { value: 10, itemStyle: { color: 'rgba(26, 75, 81)' } },  // 半透明红色
          { value: 10, itemStyle: { color: 'rgba(255, 0, 0, 0)' } },    // 透明色
          { value: 10, itemStyle: { color: 'rgba(26, 75, 81)' } },
          { value: 10, itemStyle: { color: 'rgba(255, 0, 0, 0)' } },
          { value: 10, itemStyle: { color: 'rgba(26, 75, 81)' } },
          { value: 10, itemStyle: { color: 'rgba(255, 0, 0, 0)' } }
        ]
      },
      // 外圈2
      {
        type: 'pie',
        selectedMode: 'single',
        center: ['50%', '50%'],
        radius: ['64%', '66%'],
        labelLine: {
          show: false  // 隐藏外部延伸的线段
        },
        data: [
          { value: 40, itemStyle: { color: 'rgba(31, 97, 104)' } }
        ],
        markPoint: {
          symbol: 'circle',  // 设置为圆形标记
          symbolSize: 5,    // 设置圆点的大小
          data: [
            { x: '50%', y: '17%' },    // 上方圆点
            { x: '50%', y: '82%' }, // 下方圆点
            { x: '33%', y: '50%' },   // 左侧圆点
            { x: '67%', y: '50%' }  // 右侧圆点
          ]
        }
      },
      // 外圈3
      {
        type: 'pie',
        selectedMode: 'single',
        center: ['50%', '50%'],
        radius: ['68%', '74%'],
        labelLine: {
          show: false  // 隐藏外部延伸的线段
        },
        data: [
          { value: 20, itemStyle: { color: 'rgba(26, 75, 81)' } },  // 半透明红色
          { value: 20, itemStyle: { color: 'rgba(255, 0, 0, 0)' } },    // 透明色
          { value: 20, itemStyle: { color: 'rgba(26, 75, 81)' } },
          { value: 20, itemStyle: { color: 'rgba(255, 0, 0, 0)' } },
          { value: 20, itemStyle: { color: 'rgba(26, 75, 81)' } },
          { value: 20, itemStyle: { color: 'rgba(255, 0, 0, 0)' } }
        ]
      },
      // 外圈4
      {
        type: 'pie',
        selectedMode: 'single',
        center: ['50%', '50%'],
        radius: ['73%', '74%'],
        labelLine: {
          show: false  // 隐藏外部延伸的线段
        },
        data: [
          { value: 40, itemStyle: { color: 'rgba(31, 97, 104)' } }
        ]
      }
    ]
  }



  window.addEventListener('resize', () => {
    myChart.resize()
  })
  myChart.setOption(option)
})
</script> -->
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  var myChart = echarts.init(document.querySelector('.populationechartsr'))

  let angle = 0  // 初始化旋转角度

  const option = {
    title: [{
      text: '50%',
      x: 'center',
      top: '42%',
      textStyle: {
        fontSize: 18,
        fontWeight: 400,
        color: '#1ac9ff'
      }
    }],
    polar: {
      radius: ['42%', '52%'],
      center: ['50%', '50%']
    },
    angleAxis: {
      max: 100,
      show: false,
      startAngle: 180
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        type: 'bar',
        roundCap: true,
        barWidth: 90,
        showBackground: true,
        backgroundStyle: {
          color: '#227f95'
        },
        data: [50],
        coordinateSystem: 'polar',
        itemStyle: {
          color: '#1bd4af'
        }
      },
      // 外圈1
      {
        type: 'pie',
        selectedMode: 'single',
        center: ['50%', '50%'],
        radius: ['58%', '62%'],
        startAngle: angle,  // 动态设置旋转角度
        labelLine: {
          show: false
        },
        data: [
          { value: 10, itemStyle: { color: 'rgba(26, 75, 81)' } },
          { value: 10, itemStyle: { color: 'rgba(255, 0, 0, 0)' } },
          { value: 10, itemStyle: { color: 'rgba(26, 75, 81)' } },
          { value: 10, itemStyle: { color: 'rgba(255, 0, 0, 0)' } },
          { value: 10, itemStyle: { color: 'rgba(26, 75, 81)' } },
          { value: 10, itemStyle: { color: 'rgba(255, 0, 0, 0)' } }
        ]
      },
      // 外圈2
      {
        type: 'pie',
        selectedMode: 'single',
        center: ['50%', '50%'],
        radius: ['64%', '66%'],
        labelLine: {
          show: false
        },
        data: [
          { value: 40, itemStyle: { color: 'rgba(31, 97, 104)' } }
        ],
        markPoint: {
          symbol: 'circle',
          symbolSize: 5,
          data: [
            { x: '50%', y: '17%' },
            { x: '50%', y: '82%' },
            { x: '33%', y: '50%' },
            { x: '67%', y: '50%' }
          ]
        }
      },
      // 外圈3
      {
        type: 'pie',
        selectedMode: 'single',
        center: ['50%', '50%'],
        radius: ['68%', '74%'],
        labelLine: {
          show: false
        },
        data: [
          { value: 20, itemStyle: { color: 'rgba(26, 75, 81)' } },
          { value: 20, itemStyle: { color: 'rgba(255, 0, 0, 0)' } },
          { value: 20, itemStyle: { color: 'rgba(26, 75, 81)' } },
          { value: 20, itemStyle: { color: 'rgba(255, 0, 0, 0)' } },
          { value: 20, itemStyle: { color: 'rgba(26, 75, 81)' } },
          { value: 20, itemStyle: { color: 'rgba(255, 0, 0, 0)' } }
        ]
      },
      // 外圈4
      {
        type: 'pie',
        selectedMode: 'single',
        center: ['50%', '50%'],
        radius: ['73%', '74%'],
        labelLine: {
          show: false
        },
        data: [
          { value: 40, itemStyle: { color: 'rgba(31, 97, 104)' } }
        ]
      }
    ]
  }

  window.addEventListener('resize', () => {
    myChart.resize()
  })

  function draw() {
    angle = (angle + 20) % 360  // 每次增加3度并循环
    option.series[1].startAngle = angle - 90  // 更新外圈1的旋转角度
    option.series[2].startAngle = angle  // 更新外圈2的旋转角度
    option.series[3].startAngle = angle + 90  // 更新外圈3的旋转角度
    option.series[4].startAngle = angle  // 更新外圈4的旋转角度
    myChart.setOption(option)  // 刷新图表
  }

  setInterval(draw, 1000)  // 每100ms调用一次draw函数，进行动画更新

  myChart.setOption(option)  // 初始渲染
})
</script>

<template>
  <div></div>
</template>

<style scoped></style>